<template>
	<!-- 整体 -->
    <view class="container">
		<!-- 我们品牌的LOGO -->
		<image class="logo" src="https://gd-hbimg.huaban.com/8be0c7e827374489223aaffc208970be3e58288c971a-THO3Aq_fw480webp" @click="gocalendar"></image> 
	
		<!-- 装饰的小图标 -->
		<view class="left_top_imgLogo">
			<image src="https://gd-hbimg.huaban.com/1ac34184d10a9bed4fda765126739a03878921f34c74-BadonR_fw480webp" mode=""></image>
		</view>  
	
		<view class="tagBox">
			<!-- 未登录时的轮播图 -->
			<!-- <swiper circular autoplay interval="2000" class="cardsSwiper" @change="switchCard" v-if="!tagClicked && !currentUser">
				<swiper-item class="swiperItem" v-for="(card,index) in swiper.list" :key="index"  v-if="!tagClicked">
					<view class="card"  v-if="!tagClicked">
						<image :src="card.imgUrl" mode="scaleToFill" class="image"></image>
					</view>
				</swiper-item>
			</swiper> -->
			
			<!-- 登陆后的打卡日历 -->
			<!-- <view v-if="!tagClicked && currentUser" style="z-index: 999; position: absolute;top: 192px;left: 0px;"> -->
			<view v-if="!tagClicked">
				<MyCalendar></MyCalendar>
			</view>
			
			<!-- 点击小标签的介绍 -->
			<view class="chat-outer" v-if="tagClicked">
				<view class="head">
					<view class="avatar">
						<image src="https://gd-hbimg.huaban.com/e291c8a8de16477708585d77805cb40d6ad1b7833ce2-upkuw4_fw480webp" mode="scaleToFill"></image>
					</view>
					<view class="TagTitle">{{ TagTitle }}</view>
				</view>
				
				<view class="chat-inner">{{ introduce }}</view>
				
				<view class="bottom">
					<view class="first" @click="goToAiChat">
						<image src="https://gd-hbimg.huaban.com/e616648f2e3e5ed3e3b75ca467759f29f29366c36bdb-5DNcjU_fw480webp" mode=""></image>
						<view class="text">AI对话</view>
					</view>
					<view class="second">
						<image src="https://gd-hbimg.huaban.com/ef474c3ba7438c806da83eb54e4de18a5809e5e6a8e-nWrfFd_fw480webp" mode=""></image>
						<view class="text">知识圈详情</view>
					</view>
				</view>
			</view>
			
			<!-- 装饰的小图标以及标题 -->
			<view class="BigTitle_imgLogo">
				<image src="https://gd-hbimg.huaban.com/d6299f881aa634a1981dabc7f7321cc692051ea06acb-Imnxuq_fw480webp" mode=""></image>
				<view class="BigTitle">CHOSE ONE  TOUCH IT</view>
			</view>
			
			
			<!-- 滑动小标签区域 -->
			<view class="tag" style="--t: 25s" @scroll="handleScroll" @click="controlSlide">
				<view class="tagLine"  @click="controlSlide" v-if="!stopSlide">
					<text :class="{tagItem: 'true', getActive: item.isSelected === true}"
						  v-for="item in TagList.slice(0,5)" 
						  :key="item.id" 
						  @click="clickTag(item)">
						{{ item.title }}
					</text>
				</view>
				<view class="tagLine"  @click="controlSlide"  v-if="!stopSlide">
					<text :class="{tagItem: 'true', getActive: item.isSelected === true}" 
						  v-for="item in TagList.slice(0,5)" 
						  :key="item.id"
						  @click="clickTag(item)">
						{{ item.title }}
					</text>
				</view>
				
				<scroll-view scroll-x class="tagLine_NotSlider"  v-if="stopSlide">
					<text :class="{tagItem: 'true', getActive: item.isSelected === true}"
						  v-for="item in TagList.slice(0,5)" 
						  :key="item.id"
						  @click="clickTag(item)">
						{{ item.title }}
					</text>
				</scroll-view>
			</view>
		
			<view class="tag" style="--t: 20s">
				<view class="tagLine"  @click="controlSlide"  v-if="!stopSlide">
					<text :class="{tagItem: 'true', getActive: item.isSelected === true}"
						  v-for="item in TagList.slice(6,10)" 
						  :key="item.id" 
						  @click="clickTag(item)">
						{{ item.title }}
					</text>
				</view>
		
				<view class="tagLine"  @click="controlSlide"  v-if="!stopSlide">
					<text :class="{tagItem: 'true', getActive: item.isSelected === true}"
						  v-for="item in TagList.slice(6,10)" 
						  :key="item.id" 
						  @click="clickTag(item)">
						{{ item.title }}
					</text>
				</view>
				
				<scroll-view scroll-x class="tagLine_NotSlider"  v-if="stopSlide">
					<text :class="{tagItem: 'true', getActive: item.isSelected === true}"
						  v-for="item in TagList.slice(6,10)" 
						  :key="item.id"
						  @click="clickTag(item)">
						{{ item.title }}
					</text>
				</scroll-view>
			</view>
		
			<view class="tag" style="--t: 10s">
				<view class="tagLine"  @click="controlSlide"  v-if="!stopSlide">
					<text :class="{tagItem: 'true', getActive: item.isSelected === true}"
						  v-for="item in TagList.slice(11,15)" 
						  :key="item.id" 
						  @click="clickTag(item)">
						{{ item.title }}
					</text>
				</view>
		
				<view class="tagLine"  @click="controlSlide"  v-if="!stopSlide">
					<text :class="{tagItem: 'true', getActive: item.isSelected === true}"
						  v-for="item in TagList.slice(11,15)" 
						  :key="item.id" 
						  @click="clickTag(item)">
						{{ item.title }}
					</text>
				</view>
				
				<scroll-view scroll-x class="tagLine_NotSlider"  v-if="stopSlide">
					<text :class="{tagItem: 'true', getActive: item.isSelected === true}"
						  v-for="item in TagList.slice(11,15)" 
						  :key="item.id"
						  @click="clickTag(item)">
						{{ item.title }}
					</text>
				</scroll-view>
			</view>
			
			<view class="tag" style="--t: 15s">
				<view class="tagLine"  @click="controlSlide"  v-if="!stopSlide">
					<text :class="{tagItem: 'true', getActive: item.isSelected === true}"
						  v-for="item in TagList.slice(16,19)" 
						  :key="item.id" 
						  @click="clickTag(item)">
						{{ item.title }}
					</text>
				</view>
				
				<view class="tagLine"  @click="controlSlide"  v-if="!stopSlide">
					<text :class="{tagItem: 'true', getActive: item.isSelected === true}"
						  v-for="item in TagList.slice(16,19)" 
						  :key="item.id" 
						  @click="clickTag(item)">
						{{ item.title }}
					</text>
				</view>
				
				<scroll-view scroll-x class="tagLine_NotSlider"  v-if="stopSlide">
					<text :class="{tagItem: 'true', getActive: item.isSelected === true}"
						  v-for="item in TagList.slice(16,19)" 
						  :key="item.id"
						  @click="clickTag(item)">
						{{ item.title }}
					</text>
				</scroll-view>
			</view>
		</view>
	
		<!-- 底部的星球图案 -->
		<view class="xingqiu">
			<!-- <view class="user-actions" @click="controlSlide">
				<text class="action-link" v-if="!stopSlide">停止自动滑动</text>
				<text class="action-link" v-if="stopSlide">开启自动滑动</text>
			</view> -->
			
			<view class="img">
				<image src="https://gd-hbimg.huaban.com/a9aa5f5ed3cdef8acc8aa052ab5137575b61207b688e0-cO8KUf_fw480webp" mode=""></image>
				<image src="https://gd-hbimg.huaban.com/5c6aa6859da689a06ba81daf484b08187426355841f30-Btr7or_fw480webp" style="width: 98%; height: 30%;"></image>
			</view>
		</view>
		<!-- 星球上装饰图标 -->
		<view class="lineBox1">
			<image src="https://gd-hbimg.huaban.com/d6299f881aa634a1981dabc7f7321cc692051ea06acb-Imnxuq_fw480webp"  style="width: 145rpx;height: 125rpx;margin-left: 20rpx;"></image>
		</view>
		
		<view class="tempButton" @click="gotoExersice">
			临时跳转按钮
		</view>
		
		<!-- 自定义底部tabar -->
		<MyTabar :currentPath="pathUrl"></MyTabar>
	</view>
</template>

<script>
	import tagApi from '../../api/intro/intro.js'
	import MyTabar from '../../components/MyTabar/MyTabar.vue' // 确保路径正确
	import {getTopicList, postTopicWeight} from '../../api/index.js'
	export default{
		components: {
		  MyTabar
		},
		data(){
			return {
				show: true,
				mode: 'date',
				pathUrl: '/pages/index/index',
				tagWidth: 0, // 用于存储.tag容器的宽度
				scrollPosition: 0, // 当前滚动位置
				TagList: [],
				tagClicked: false,
				TagTitle: 'Subheading',
				introduce: '给老子点下面的标签！',
				avatar: '../../static/logo.png',
				stopSlide: false
			}
		},
		// created() {
		//   this.getTagList();
		// },
		onLoad() {
			this.TagList = tagApi.introTemp
			
			// getTopicList()
			// 	.then(res => {
			// 		console.log(res.data)
			// 		this.TagList = res.data
			// 		// this.TagList1 = res.data.slice(0,4)
			// 		// this.TagList2 = res.data.slice(5,9)
			// 		// this.TagList3 = res.data.slice(10,14)
			// 		// this.TagList4 = res.data.slice(15,20)
			// 	})
			// 	.catch(err => {
			// 		console.log(err)
			// 	})
			// 	.catch(err => {
			// 		console.log(err)
			// 	})
		},
		onShow(){
			this.tagClicked = false
			this.stopSlide = false
		},
		methods: {
			// getTagList() {
			// 	tagApi.introTemp.then((response) => {
			// 		this.TagList = response.data;
			// 	});
			// },
			gotoExersice(){
				uni.navigateTo({
					url: '../../ExercisePages/index/index'
				})
			},
			controlSlide(){
				this.stopSlide = !this.stopSlide
			},
			goToAiChat(){
				uni.navigateTo({
					url: '../../AiPage/AiChat/index'
				})
			},
			clickTag(item){
				// 在整个标签数组找到这个标签，激活它的【被点击】属性
				this.TagList.forEach(tag => {
					if(item.id === tag.id){
						tag.isSelected = true
					}
				})
				// 然后把要展示的基本信息挂载
				this.TagTitle = item.title
				this.introduce = item.introduce
				this.avatar = item.avatar
				console.log(item)
				
				let obj = {
					id: item.id+'',
					type: 2
				}
				console.log(obj)
				postTopicWeight(obj)
					.then(res => {
						console.log(res)
					})
					.catch(err => {
						console.log(err)
					})
				
				// 过一段时间再让他自动恢复没激活的状态
				setTimeout(()=>{
					this.TagList.forEach(tag => {
						if(item.id === tag.id){
							tag.isSelected = false
						}
					})
				},1000)
				
				// 另外要让上面打卡或者轮播图的位置变回显示AI聊天框预览展示
				this.tagClicked = true
			},
      
		}
	}
</script>

<style>
	page{
		background-image: url('https://gd-hbimg.huaban.com/68bb9dee1eed7f34673120d61b18a29d88adcb83713c9-hDYMPo_fw480webp');
		background-size: 100% 100%;
	}
</style>

<style lang="less" scoped>
	.tempButton{
		width: 100rpx;
		height: 100rpx;
		background-color: #4f96b2;
		position: absolute;
		bottom: 218rpx;
		left: 76rpx;
	}
	
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.logo{
			// position: absolute;
			// top: 80rpx;
			// left: 50rpx;
			// width: 150rpx;
			// height: 130rpx;
			position: absolute;
			top: 75rpx;
			left: 10rpx;
			width: 220rpx;
			height: 170rpx;
		}
		.left_top_imgLogo{
			text-align: center;
			width: 100%;
			margin-top: 180rpx;
			font-size: 30px;
			font-weight: bold;
			color: #fff;
			image{
				position: absolute;
				top: 171rpx;
				left: 548rpx;
				width: 135rpx;
				height: 130rpx;
				-webkit-transform: rotateZ(70deg);
				transform: rotateZ(70deg);
			}
		}
		
		
		.tagBox{
			
			.chat-outer {
				margin: auto;
				margin-top: 50px;
				padding: 16px;
				padding-top: 20rpx;
				padding-bottom: 15rpx;
				border: 2px solid rgba(120, 150, 200, 0.5);
				border-radius: 10px;
				width: 80%;
				max-width: 80%;
				min-height: 340rpx;
				height: auto;
				position: relative; /* 父盒子设置为相对定位 */
				display: flex;
				flex-direction: column;
				color: #fff;
				
				.head{
					width: 100%;
					height: 75rpx;
					display: flex;
					.avatar{
					    width: 80rpx;
					    height: 80rpx;
					    border-radius: 50%;
					    border: 8rpx solid rgba(173, 247, 255, 0.33);
						background-color: rgba(255, 255, 255, 0.66);
						box-sizing: border-box;
						padding: 3rpx;
						padding-left: 6rpx;
			
						image{
							width: 95%;
							height: 95%;
							border-radius: 50%;
						}
					}
					.TagTitle{
						text-align: center;
						margin-left: 20rpx;
						width: 75%;
						height: 100%;
						border: 2px solid rgba(120, 150, 200, 0.5);
						border-radius: 10rpx;
						line-height: 72rpx;
					}
				}
				
				.chat-inner {
					margin-top: 30rpx;
					padding: 8px;
					border: 2px solid rgba(120, 150, 200, 0.5);
					border-radius: 5px;
					width: 100%;
					max-width: 100%;
					min-height: 172rpx;
					height: auto;
					z-index: 1; /* 设置子盒子的堆叠顺序 */
					text-indent:2em;
					overflow: auto;
				}
				
				.bottom{
					display: flex;
					justify-content: space-between;
					width: 100%;
					height: 124rpx;
					view{
						padding: 0;
					    margin-top: 20rpx;
					    font-size: 13px;
					    width: 130rpx;
					    height: 118rpx;
					    border-radius: 50rpx;
					    display: flex;
					    flex-direction: column;
					    align-items: center;
						image{
							width: 60rpx;
							height: 60rpx;
						}
						.text{
							width: 100%;
							height: 50rpx;
							margin-top: 0;
							font-size: 12px;
						}
					}
					.first{
						margin-left: 10rpx;
					}
					.second{
						width: 180rpx;
						margin-left: 140rpx;
					}
				}
			}
			
			
			.BigTitle_imgLogo{
				height: 120rpx;
				margin-top: 20rpx;
				image{
				    position: absolute;
				    top: 663rpx;
				    left: 26rpx;
				    width: 145rpx;
				    height: 125rpx;
				    -webkit-transform: rotateZ(20deg);
				    transform: rotateZ(20deg);
				}
				.BigTitle{
					text-align: center;
					color: #fff;
					font-size: 20px;
					line-height: 167rpx;
					height: 100%;
				}
			}
			
			.tag{
				/* margin-left: 500px; */
				position: relative;
				display: flex;
				width: 700rpx;
				overflow: hidden;
				/* 蒙版，透明的地方不显示 */
				/* 透明到白色，白色到透明,中间5%~95%才显示 */
				mask-image: linear-gradient(90deg, transparent, #181515 10%, #181515 95%, transparent);
				/* 加个背景才看得清楚 */
				/* background-color: red; */
				
				.tagLine{
					white-space: nowrap;
					/* 绑定不同的动画：animation：动画名  时间  linear匀速  infinite无限循环播放 */
					animation:animate var(--t) linear infinite;
					display: inline-block; /* 确保每个view元素并排显示 */
					
					.tagItem{
						display: inline-flex;
						display: inline-flex;
						margin: 10px;
						letter-spacing:.3em;
						background-color: #1E495E;
						color: #fff;
						font-size: 15px;
						text-shadow: 5px 5px 10px #000000;
						padding:5px 10px;
						border-radius:5px;
						// 加上发光效果
						transition: 1s;
						// 弄成八边形
						clip-path: polygon(13% 0%, 88% 0%, 100% 20%, 100% 88%, 88% 100%, 13% 100%, 0% 86%, 0% 20%);
						border: 1px solid #bdbdbd6b;
					}

					
					.getActive{
						font-size: 16px;
						color: #9fc6c0;
						background: #4f96b2;
						box-shadow: 0 0 10px #4f96b2,
									0 0 10px #4f96b2,
									0 0 10px #4f96b2,
									0 0 10px #4f96b2;
					}
			
				}
				.tagLine_NotSlider{
					white-space: nowrap;
					display: inline-block; /* 确保每个view元素并排显示 */
					
					.tagItem{
						display: inline-flex;
						display: inline-flex;
						margin: 10px;
						letter-spacing:.3em;
						background-color: #1E495E;
						color: #fff;
						font-size: 15px;
						text-shadow: 5px 5px 10px #000000;
						padding:5px 10px;
						border-radius:5px;
						// 加上发光效果
						transition: 1s;
						// 弄成八边形
						clip-path: polygon(13% 0%, 88% 0%, 100% 20%, 100% 88%, 88% 100%, 13% 100%, 0% 86%, 0% 20%);
						border: 1px solid #bdbdbd6b;
					}
				
					
					.getActive{
						font-size: 16px;
						color: #9fc6c0;
						background: #4f96b2;
						box-shadow: 0 0 10px #4f96b2,
									0 0 10px #4f96b2,
									0 0 10px #4f96b2,
									0 0 10px #4f96b2;
					}
							
				}
				
				view:nth-child(2){
					/* 绑定不同的动画：animation：动画名  时间  linear匀速  infinite无限循环播放 */
					animation:animate2 var(--t) linear infinite;
					/* 控制动画开始的时间，这里我让它提前执行，也就是在原来第一个动画开始 */
					animation-delay:calc(var(--t) / -2);
				}
				
				@keyframes animate{
					from{
						transform:translate(100%)
					}
					to{
						transform:translate(-100%);
					}
				}
				@keyframes animate2{
					from{
						transform:translate(0);
					}
					to{
						transform:translate(-200%);
					}
				}
				
			}
		}
		
		.xingqiu{
			width: 100%;
			display: flex;
			height: 311rpx;
			justify-content: center;
			margin-top: 53rpx;
			position: absolute;
			bottom: 2vh;
			
			.user-actions {
				z-index: 999;
				position: absolute;
				bottom: 310rpx;
				left: 27rpx;
				display: flex;
				align-items: center;
				color: #fff;
				margin-left: auto;
				.action-link {
					text-decoration: underline;
					color: #a69f9f94;
				}					
			}
			
			.img{
				width: 57%;
				height: 100%;
				image{
					width: 100%;
					height: 70%;
				}
			}
			
		}
		
		.lineBox1{
			position: absolute;
			bottom: 216rpx;
			right: 5rpx;
			width: 205rpx;
			height: 145rpx;
			-webkit-transform: rotateZ(251deg);
			transform: rotateZ(251deg);
		}
	}
	
	/deep/ ::-webkit-scrollbar {
		 //滚动条整体样式
		    display: none;
		    width: 0px !important;
		    height: 0px !important;
		    -webkit-appearance: auto!important;
		    background: red;
		    overflow: auto!important;
	 }
	 /deep/ ::-webkit-scrollbar-thumb {
		 //滚动条里面小方块
	 	   border-radius: 0px !important;
		   box-shadow: inset 0 0 5px rgba(0,0,0,0.2) !important;
		   background-color: #535353 !important;
	 }
	 /deep/ ::-webkit-scrollbar-track {
	 	   //滚动条
	 	   border-radius: 0px !important;
	 	   box-shadow: inset 0 0 5px rgba(0,0,0,0.2) !important;
	 	   background-color: #ededed !important;
	 }
</style>